<template>
  <demoBlock title="自定义样式">
    <vcu-steps :active="active" active-icon="car-fill" inactive-icon="right" active-color="#38f">
      <vcu-step>买家下单</vcu-step>
      <vcu-step>商家接单</vcu-step>
      <vcu-step>买家提货</vcu-step>
      <vcu-step>交易完成</vcu-step>
    </vcu-steps>
    <vcu-button class="m-10" @click="handleNext">下一步</vcu-button>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const active = ref(0);
    const handleNext = () => {
      active.value < 3 ? active.value++ : null;
    };
    return { active, handleNext };
  },
});
</script>
